<script setup lang="ts">

import {useQuestionStore} from "@/stores/question";

const questionStore = useQuestionStore();

import options from "@/components/options";
import type {Question} from "@/types/schema.ts";

const getComponent = (item: Question) => {
  return options[item.type]
}

const setCurrentQueIndex = (index: number) => {
  questionStore.setCurrentQueIndex(index)
}
</script>

<template>
  <ul class="question-editor-container">
    <li
        class="question-item"
        :class="{'active': index === questionStore.currentQueIndex}"
        v-for="(que, index) in questionStore.questionList"
        :key="que.uniqueId"
        @click="setCurrentQueIndex(index)"
    >
      <div class="question-title">{{ `${index + 1}.${que.title}` }}</div>
      <component :is="getComponent(que)" v-bind="que"/>
    </li>
  </ul>
</template>

<style scoped>
.question-editor-container {
  padding-left: 120px;
  max-height: 100vh;
  overflow-y: auto;
  .question-item {
    padding: 16px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;

    .question-title {
      margin-bottom: 10px;
    }

    &:hover {
      transition: .3s;
      border-color: #2f88ff;
    }
  }

  .active {
    transition: .3s;
    border-color: #2f88ff;
  }
}
</style>